<template>
	<div v-if="showDelay" class="ct-popup-style" :style="{
			opacity:opacity
		}">
		<view @click="clickCover" class="ct-popup-style-bg" @touchmove.stop.prevent="disabledScroll"></view>
		<view :class="[`ct-popup-style-${mode}`]" :style="{
			'maxHeight':(mode=='bottom' || mode=='top') && height,
			'maxWidth':(mode=='right' || mode=='left') && width
		}">
			<template v-if="componentsName">
				 <!-- #ifndef MP-WEIXIN -->
				<component :ct_data="params" :is='componentsName' />
				<!-- #endif -->
			</template>
			<template v-else>
				<slot v-if="$slots.default"></slot> 
			</template>
		</view>
	</div>
</template>

<script>
	import expireConfirm from "@/components/xlf/xlf-com/expireConfirm.vue";
	export default {
		name: "ct-popup",
		components: {
			expireConfirm,
		},
		data() {
			return {
				show: false,
				showDelay:false,
				mode: "",
				params: {},
				componentsName: "",
				opacity: 0,
				height: 0,
				width:0,
				isCoverClick:false,//是否点击遮罩关闭弹框
			}
		},
		methods: {
			disabledScroll() {
				return
			},
			set_style(params) {
				this.show = params.show
				this.isCoverClick = params.isCoverClick
				this.componentsName = params.componentsName || '' //componentsName  所需要显示的组件名称
				this.params = params.params || {} //params 组件所携带的参数  -组件通过ct_data接收
				this.mode = params.mode || 'center'
				this.set_view()

			},
			//纯组件调用
			open(params={}) {
				this.show = true
				this.isCoverClick = params.isCoverClick
				this.componentsName = params.componentsName || '' //componentsName  所需要显示的组件名称
				this.params = params.params || {} //params 组件所携带的参数  -组件通过ct_data接收
				this.mode = params.mode || 'center'
				this.set_view()
			
			},
			clickCover(){
				if(this.isCoverClick){
					this.close()
				}
			},
			close(params={}) {
				this.show = false
				this.set_view()
			
			},
			set_view(){
				if(this.show){
					this.showDelay = true
				}else{
					setTimeout(()=>{
						this.showDelay = false
					},500)
				}
				this.set_opacity()
				this.set_height()
				this.set_width()
			},
			set_opacity() {
				switch (this.show) {
					case true:
						setTimeout(() => {
							this.opacity = 1
						}, 200)
						break;
					case false:
						this.opacity = 0
						break;
				}

			},
			set_height() {
				switch (this.show) {
					case true:
						setTimeout(() => {
							this.height = "80vh"
						}, 200)
						break;
					case false:
						this.height = 0
				}
			},
			set_width() {
				switch (this.show) {
					case true:
						setTimeout(() => {
							this.width = "80vw"
						}, 200)
						break;
					case false:
						this.width = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ct-popup-style {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		transition: all 0.2s linear;

		.ct-popup-style-bg {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
		}

		.ct-popup-style-center {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50.15%, -50%);
			z-index: 999;
		}

		.ct-popup-style-bottom {
			position: fixed;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			z-index: 999;
			transition: all 0.2s linear;
			background-color: #fff;
			overflow:hidden;
		}
		.ct-popup-style-top {
			position: fixed;
			left: 50%;
			top: 0;
			transform: translateX(-50%);
			z-index: 999;
			transition: all 0.2s linear;
			background-color: #fff;
			overflow:hidden;
		}
		.ct-popup-style-right {
			position: fixed;
			right: 0;
			top: 0;
			height: 100vh;
			background-color: #fff;
			transition: all 0.2s linear;
			overflow: hidden;
		}
		.ct-popup-style-left {
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			background-color: #fff;
			transition: all 0.2s linear;
			overflow: hidden;
		}

	}
</style>